<template>
  <div class="app-container">
    <div class="content-wapper">
      <div class="content-main">
        <el-card class="info-card">
          <div slot="header" class="clearfix">
            <span>内容基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
              <span class="detail-tit">标题</span>
              {{ baseInfo.title }}
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">作者</span>
              {{ baseInfo.author.fullName }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">录入时间</span>
              {{ baseInfo.createdAt }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">更新时间</span>
              {{ baseInfo.updatedAt }}
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">权重</span>
              {{ baseInfo.weight }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">审核状态</span>
              {{ auditStatus ? auditStatus[baseInfo.auditStatus] : "" }}
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
              <span class="detail-tit">文章状态</span>
              {{ baseInfo.onShelve ? "上架" : "下架" }}
            </el-col>
          </el-row>
          <el-row
            v-if="baseInfo.keywords && baseInfo.keywords.length"
            :gutter="20"
          >
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <span class="detail-tit">关键词</span>
              {{
                Array.isArray(baseInfo.keywords)
                  ? baseInfo.keywords.join("，")
                  : baseInfo.keywords
              }}
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>视口预览</span>
          </div>
          <div>
            <el-tabs tab-position="left" style="height: 500px">
              <el-tab-pane label="wap">
                <pre-view :type="type" :ids="ids" :view-type="'appView'" />
              </el-tab-pane>
              <el-tab-pane label="微信">
                <pre-view :type="type" :ids="ids" :view-type="'wechatView'" />
              </el-tab-pane>
              <el-tab-pane label="百度">
                <pre-view :type="type" :ids="ids" :view-type="'baiduView'" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
      <div class="content-tags">
        <tags
          :content-id="ids"
          :content-type="type"
          :tag-list="baseInfo.tags"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getDetail } from "@/api/content";
import tags from "@/components/common/Tag";
import PreView from "@/components/common/PreView";
export default {
  components: {
    tags,
    PreView,
  },
  data() {
    return {
      loaded: false,
      loading: null,
      ids: "",
      type: "",
      typeName: "",
      baseInfo: {
        author: {},
        tags: [],
      },
      biz: {
        PGC: "麻雀分发平台",
        CMS: "采编发系统",
        HJ: "行家系统",
      },
    };
  },
  created() {
    this.ids = this.$route.params.id;
    const { contentTypeObj } = this.$store.getters;
    console.log("路由信息", contentTypeObj, this.$route.name);
    Object.keys(contentTypeObj).every((item) => {
      if (~this.$route.name.indexOf(item)) {
        this.type = item;
        this.typeName = contentTypeObj[item];
        return false;
      }
      return true;
    });
    console.log(this.type, this.typeName);
    this.getInfo(this.ids);
  },
  methods: {
    getInfo(id) {
      console.log();
      if (this.loaded) return;
      const loading = this.$loading({
        text: "加载中...",
      });
      // console.log('loading', loading)
      getDetail(id, this.type)
        .then((res) => {
          this.loaded = false;
          loading.close();
          console.log("输出详情页", res);
          if (res.id) {
            this.baseInfo = res;
            if (
              Array.isArray(this.baseInfo.tags) &&
              !this.baseInfo.tags.length
            ) {
              this.hasTags = false;
            } else {
              this.hasTags = true;
            }
          } else {
            this.$message.error({
              message: "基本信息加载失败",
            });
            this.loaded = false;
            loading.close();
          }
        })
        .catch((err) => {
          console.log("err", err);
          this.$message.error({
            message: "基本信息加载失败",
          });
          this.loaded = false;
          loading.close();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.info-card {
  margin-bottom: 30px;
}
</style>
